<template>
  <el-drawer
    width="1000px"
    :title="$t('message.kcxq')"
    :visible.sync="isShowDetail"
    :before-close="closeDrawer"
    size="1000px"
    class="dialog-siteFixedReserve"
  >
    <div class="df_sb header">
      <div class="left df">
        <img class="img" :src="detail.courseFullImg" alt="">
        <div class="content">
          <div>
            <strong style="font-size: 16px;">{{ detail.courseName }}</strong>
            <span v-if="detail.isHot" class="ml10 fs12 hot">{{ detail.isHot }}</span>
            <span v-if="detail.status" class="primaryColor ml10 fs12">{{ detail.status }}</span>
          </div>
          <div>
            <span>{{ $t('message.price') }}：{{ detail.coursePrice }}</span>
          </div>
          <div>{{ $t('message.createTime') }}：{{ detail.creatTime }}</div>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div>{{ $t('message.yyyzcs') }}</div>
          <div class="num">{{ detail.appointmentNum }}</div>
        </div>
        <div class="item">
          <div>{{ $t('message.zryyrs') }}</div>
          <div class="num">{{ detail.yesterdayNum }}</div>
        </div>
        <div class="item">
          <div>{{ $t('message.jryyrs') }}</div>
          <div class="num">{{ detail.todayNum }}</div>
        </div>
      </div>
    </div>

    <div class="line-style mt20" />
    <div class="property-title" style="margin-top: 20px">{{ $t('message.kcxx') }}</div>
    <el-form ref="ruleForm" :model="detail" class="siteDetails" label-suffix="：">
      <el-form-item :label="$t('message.kcsj')" class="form-item">
        <span>{{ detail.duration }}</span>
      </el-form-item>
      <el-form-item :label="$t('message.fbqd')" class="form-item">
        <span>{{ detail.channel }}</span>
      </el-form-item>
      <el-form-item :label="$t('message.kcms')" class="form-item">
        <span>{{ detail.classType }}</span>
      </el-form-item>
      <el-form-item :label="$t('message.skdd')" class="form-item">
        <span>{{ detail.site }}</span>
      </el-form-item>
      <el-form-item :label="$t('message.yyfs')" class="form-item">
        <span>{{ detail.payType }}</span>
      </el-form-item>
      <el-form-item :label="$t('message.sort')" class="form-item">
        <span>{{ detail.sortNum }}</span>
      </el-form-item>
    </el-form>

    <div class="property-title">{{ $t('message.hyzk') }}</div>
    <div>
      <div class="flex1">
        <span class="key">{{ $t('message.zklx') }}：</span>
        <span class="value">{{
          detail.discountType === "1" ? $t('message.zdyzk') :$t('message.mrzk')
        }}</span>
      </div>
    </div>
    <div v-if="detail.discountType === '1'" class="mt20 discount_wrap">
      <div v-for="item in vipTypes" :key="item.id" class="discount">
        <span v-if="item && item.name" class="key">{{ item.name }}：</span>
        <span class="value">{{ item.value * 10 }}{{ $t('message.zhe') }}</span>
      </div>
    </div>
    <div class="property-title" style="margin-top: 20px">{{ $t('message.jlxx') }}</div>
    <div class="coachList">
      <div v-for="item,index in detail.teacherData" :key="index" class="item">
        <img class="img" :src="item.img" alt="">
        <div class="mb10">{{ item.name }}</div>
        <div class="placeholder9 fs12 mt10" style="height: 20px;">{{ item.levelName }}</div>
        <div class="placeholder9 fs12">{{ $t('message.ljsk') }}{{ item.classNum || 0 }}{{ $t('message.keshi') }}</div>
      </div>
    </div>
    <div style="margin-top: 20px" v-html="detail.info" />
  </el-drawer>
</template>

<script>
import { IndividualLessonDetail, cardList } from '@/api'
export default {
  data() {
    return {
      isShowDetail: false,
      detail: {},

      vipTypes: []
    }
  },
  methods: {
    showDetail(row) {
      IndividualLessonDetail({ param: { courseId: row.id }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.detail = { ...row, ...res.record }
            cardList({
              pagination: {
                page: 1,
                rows: 1000,
                firstQueryTime: this.firstQueryTime
              },
              param: {
                cardName: null,
                isnormal: null,
                channel: null,
                type: '1'
              }
            }).then(res2 => {
              if (row.discountType === '1') {
                this.vipTypes = []
                res2.recordList.forEach((item) => {
                  if (item.status === '1') {
                    this.vipTypes.push({
                      name: item.cardName,
                      id: item.id,
                      value: row.disCountMap[item.id] || 1
                    })
                  }
                })
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.$nextTick(() => {
        this.isShowDetail = true
      })
    },
    closeDrawer() {
      this.isShowDetail = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  .left{
    .img{
      width: 120px;
      height: 60px;
      margin-right: 10px;
    }
    .content{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .hot{
        border-radius: 2px;
        border: 1px solid #FF1B1B;
        color: #FF1B1B;
        padding: 2px 4px;
      }
    }
  }
  .right{
    display: flex;
    background-color: #F4F7FC;
    padding: 14px 20px;
    .item{
      margin-left: 20px;
      .num{
        margin-top: 10px;
      }
    }
  }
}
.coachList{
  display: flex;
  width: 100%;
  overflow: auto;
  .item{
    flex-shrink: 0;
    width: 108px;
    height: 133px;
    text-align: center;
    background-color: #f7f7f7;
    margin-right: 20px;
    .img{
      width: 40px;
      height: 40px;
      margin: 12px 0 4px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
.siteDetails {
  display: flex;
  flex-wrap: wrap;
  .form-item {
    width: 33.33%;
    display: flex;
    margin-right: 0%;
    margin-bottom: 5px;
    ::v-deep .el-form-item__content {
      flex: 1;
    }
    ::v-deep .el-date-editor {
      width: 100%;
    }
  }
}
.discount_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .key {
    width: 90px;
  }
  .discount {
    width: 33.33%;
    margin-bottom: 20px;
  }
}
</style>
